<template>
	<view class="main">
		<u-navbar :title="state.title" :autoBack="true" :placeholder="true" :titleStyle="state.titleStyle" :height="40"
			bgColor="#fff">
		</u-navbar>
		<view class="line" v-if="state.type==1">
			<text>昵称</text>
			<input type="text" placeholder="请输入昵称" v-model="state.nickname"/>
		</view>
		<view v-if="state.type==2||state.type==3">
			<view class="line">
				<text>手机号</text>
				<input type="number" placeholder="请输入手机号" v-model="state.phone"/>
			</view>
			
			<view class="line">
				<text>验证码</text>
				<input type="number" placeholder="请输入验证码" v-model="state.code" style="width: 40%;"/>
				<view class="code" @click="sendCodeBtn()">
					{{state.send?'发送验证码':state.second+'s'}}
				</view>
			</view>
			<view v-if="state.type==2">
				<view class="line">
					<text>密码</text>
					<input type="password" placeholder="请输入密码" v-model="state.pwd"/>
				</view>
				<view class="line">
					<text>确认密码</text>
					<input type="password" placeholder="请再次输入密码" v-model="state.pwds"/>
				</view>
			</view>
		</view>
		<view class="button" @click="getButten">
			保存
		</view>
	</view>
</template>

<script setup>
import {  ref, reactive,  } from 'vue';
import sheep from '@/sheep';
import { onLoad, } from '@dcloudio/uni-app';
	const state = reactive({
		titleStyle: 'fontWeight:bold',
		type:'',
	    nickname: '',
		phone: '',
		code: '',
		pwd: '',
		pwds: '',
	    s: 60, //默认倒计时
	    second: 0,
	    send: true, //按钮可以点击
	  });
	onLoad((options) => {
		//title: options.data == 1 ? '更换昵称' : (options.data == 2 ? '更换密码' : '更换手机'),
		state.type=options.data
		if(options.data==1){
			state.title='更换昵称'
		}else if(options.data == 2){
			state.title='更换密码'
		}else{
			state.title='更换手机'
		}
	});
	// 点击送短信
	async function sendCodeBtn() {
		if (!state.send) {
			return false;
		}
		const {code,data} = await sheep.$api.login.send({
			mobile:state.phone,
			event:'changepwd'
		})
		if (code == 1) {
			state.send = false;
			
			uni.showToast({
				title: '发送成功',
				icon: 'none',
				success: () => {
					time(); // 倒计时
				}
			})
		}
	}
	
	async function  getButten(){
		// 修改密码
		if(state.type==2){
			const {code,data} = await sheep.$api.login.editpwd({
				token:uni.getStorageSync('token'),
				newpassword:state.pwd,
				realpassword:state.pwds,
				captcha:state.code
			})
			if (code == 1) {
			   uni.showToast({
			   	title: '修改成功',
			   	icon: 'none'
			   })
			}
		}else if(state.type==1){
			// 修改密码
			const {code,data} = await sheep.$api.login.profile({
				token:uni.getStorageSync('token'),
				nickname:state.nickname
			})
			if (code == 1) {
				uni.showToast({
					title: '修改成功',
					icon: 'none'
				})
			}
		}else{
			//修改手机号
			const {code,data} = await sheep.$api.login.changemobile({
				token:uni.getStorageSync('token'),
				mobile:state.phone,
				captcha:state.code
			})
			if (code == 1) {
				uni.showToast({
					title: '修改成功',
					icon: 'none'
				})
			}
		}
		
	}
	
	// 倒计时
	function time() {
		// let that = this;
		state.second = state.s;
		let interval = setInterval(function() {
			if (state.second == 1) {
				state.send = true;
				state.second = state.s;
				clearInterval(interval);
			} else {
				console.log(state.second)
				state.second--;
			}
		}, 1000)
	}
	
</script>

<style lang="scss">
	page {
		height: 100%;
		width: 100%;
		background: #f5f5f5;

		.main {
			padding: 24rpx 0;

			.line {
				display: flex;
				align-items: center;
				background: #FFFFFF;
				padding: 36rpx 32rpx;
				border-bottom: 2rpx solid #F5F5F5;
				input{
					// margin-left: 32rpx;
				}
				text{
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					width: 24%;
					padding-right: 20rpx;
				}
				.code{
					margin-left: auto;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #1BDDD0;
				}
			}
			.button{
				width: 92%;
				margin: 100rpx auto 0;
				background: #1BDDD0;
				border-radius: 54rpx;
				padding: 24rpx 0;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
	}
</style>